<div id="model"></div>
<div class="pci-mark">
  <div class="pic-container">
    <img src="" alt="">
  </div>
  </div>

  <script>
    Modelo.init({ endpoint: "https://build-portal.modeloapp.com" });

  var modelId = "ag8lxB8y";
  var appToken = 'dGluZy5zdW5AMWhlbGxvLmNvbSx3elRoV0Y4ZlZn';

  var picControl = document.querySelector('.pci-mark')

  picControl.addEventListener('click', function () {
    this.style.display = 'none'
  })
  Modelo.Auth.signIn(appToken,
    function () {
        var viewer = new Modelo.View.Viewer3D("model");

        window.addEventListener("hashchange",function() {
          if (viewer) {
            viewer.destroy()
          }
            return
        });

        viewer.loadModel(modelId, // Load the model into the viewer.
            null,
            function () {
              viewer.addInput(new Modelo.View.Input.Mouse(viewer)); // Add mouse to control camera.
              var keyboard = new Modelo.View.Input.Keyboard(viewer); // Add keyboard callback.
              viewer.addInput(keyboard);
              var selectElementTool = new Modelo.View.Tool.SelectElements(viewer);
              viewer.addTool(selectElementTool);
              selectElementTool.setEnabled(true);
                keyboard.addKeyUpListener(function (keyboard) {
                    if (keyboard.key === 27) {
                        viewer.destroy();
                    }
                });
                 viewer.getCamera().core.zoomTo(0, 300.0);

                 viewer.getEventEmitter().on("onElementSelected", (elementNames1) => {
                    if (elementNames1.length) {
                      if (elementNames1.toString().indexOf('139854') > -1) {
                        $('.pic-container img').attr('src', "assets/images/20181101-1.png")
                        picControl.style.display = 'block'
                      }
                      if (elementNames1.toString().indexOf('155278') > -1) {
                        $('.pic-container img').attr('src', "assets/images/20181101-2.png")
                        picControl.style.display = 'block'
                      }
                      if (elementNames1.toString().indexOf('182328') > -1) {
                        $('.pic-container img').attr('src', "assets/images/20181101-3.png")
                        picControl.style.display = 'block'
                      }
                      if (elementNames1.toString().indexOf('146741') > -1) {
                        $('.pic-container img').attr('src', "assets/images/20181101-4.png")
                        picControl.style.display = 'block'
                      }
                    }
                });


            },
            function (errmsg) {
                console.log(errmsg); // The loading error.
            },
            function (per) {});
    },
    function (errmsg) {
        console.log(errmsg); // If there is any sign-inerror.
    });
</script>

  <!-- <link rel="stylesheet" href="http://api-release.modeloapp.com/prod/modeloapiui-1.0-lts.css" type="text/css" /> -->

  <style type="text/css">
    #model {
      width: 957px;
      height: 500px;
      position: relative;
    }

    .pci-mark {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 999;
      background-color: rgba(0, 0, 0, .5);
      display: none;

    }

    .pic-container {
      display: flex;
      align-items: center;
      /*垂直居中*/
      justify-content: center;
      /*水平居中*/
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .pic-container img {
      max-height: 80%;
      display: block;
    }
  </style>
